<template>
	<div class="web-index">
		<header class="web-header" :class="[scrollY > 150 ? 'web-header-fixed' : '']">
			<div class="top-head">
				<div class="logo">
					<img src="@/assets/logo/web-logo.png" alt="">
					<a href="/webMain">校园论坛</a>
				</div>
			</div>
			<div class="wrap">
				<div class="nav">
					<div class="nav-box">
						<a href="/webMain" class="menu-item">首页</a>
						<a href="/synthesize" class="menu-item">综合</a>
						<a href="/share" class="menu-item">分享</a>
						<a href="/partJob" class="menu-item">兼职</a>
						<a href="/study" class="menu-item">学习交流</a>
						<a href="/webNotice" class="menu-item">通知公告</a>
						<a href="/personal" class="menu-item">个人中心</a>
						<a href="/contact" class="menu-item">联系我们</a>
					</div>
					<a href="/personal" class="menu-item user">欢饮您，若依</a>
				</div>
			</div>
		</header>
		<div class="web-container" ref="container">
			<transition name="fade-transform" mode="out-in">
				<keep-alive>
					<router-view v-if="!$route.meta.link" :key="key" />
				</keep-alive>
			</transition>
			<footer class="web-footer">
				<div class="copyright">版权所有 Copyright ©2025-2026</div>
				<div class="friend-wrap">
					<div class="left">友情链接: </div>
					<div class="link-box">
						<div class="link" v-for="(item, index) in friendList" :key="index">
							<a :href="item.link" target="_blank">{{ item.name }}</a>
						</div>
					</div>
				</div>
			</footer>
		</div>
	</div>
</template>

<script>
import store from '@/store/index'
import { getToken, removeToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
	name: 'WebIndex',
	data() { 
		return {
			//滚动距离
			scrollY: 0,
			//友情链接
			friendList: [
				{ name: '清华大学论坛', link: 'http://www.thubbs.cn/'},
				{ name: '复旦大学论坛', link: 'http://fdubbs.com/' },
				{ name: '武汉大学论坛', link: 'http://www.wudabbs.com.cn/' },
				{ name: '中国农业大学论坛', link: 'http://bbs.caue.com.cn/' },
				{ name: '南京大学论坛', link: 'http://www.ndxlj.com/' },
				{ name: '浙江大学论坛', link: 'http://www.zju1.com/' },
				{ name: '中山大学论坛', link: 'http://www.zsedc.com/' },
				{ name: '重庆大学论坛', link: 'http://www.mzhbbs.com/' },
				{ name: '上海大学论坛', link: 'http://www.shdxlt.cn/' },
				{ name: '同济大学论坛', link: 'https://tjubbs.net/' }
			]
		}
	},
	computed: {
		...mapGetters([
			'name',
			'avatar'
		]),
		key() {
			return this.$route.path
		}
	},
	mounted() { 
		// this.initPage();
	},
	methods: {
		/**
		 * 初始化页面
		 */
		initPage() { 
			//判断是否登录
			if (getToken()) { 
				this.queryUserInfo()
			}

			let el = this.$refs.container;
			el.addEventListener('scroll', () => { 
				this.scrollY = el.scrollTop;
			})
		},
		/**
		 * 获取用户信息
		 */
		queryUserInfo() { 
			// 判断当前用户是否已拉取完user_info信息
			store.dispatch('GetInfo').then(() => {
				this.isLogin = true
			}).catch(err => {
				this.isLogin = false
			})
		},
		/**
		 * 首页
		 */
		handleHomePage() { 
			this.$router.push('/webMain')
		},
		/**
		 * 个人中心
		 */
		handlePersonal() { 
			this.$router.push('/personal')
		},
		/**
		 * 退出登录
		 */
		handleLogout() { 
			removeToken();
			this.$router.push('/login')
		}
	}
}
</script>

<style lang="scss" scoped>
.web-index {
	width: 100%;
	height: 100%;
    margin: 0 auto;
	overflow: hidden;
	background-color: #fff;
	.web-header {
		position: relative;
		background-color: #fff;
		width: 100%;
		top: 0;
		z-index: 9999;
		transition: all .3s ease;
		.top-head {
			width: 1280px;
			height: 60px;
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.wrap {
			width: 100%;
			height: 48px;
			background-color: #80A681;
			.nav {
				display: flex;
				width: 1280px;
				margin: 0 auto;
				height: 100%;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				.menu-item {
					color: #eeffe3;
					transition: all .2s;
					font-size: 14px;
					margin-right: 30px;
					&:hover {
						color: #fff;
					}
					&.user {
						padding-right: 0;
					}
				}
			}
		}
		.logo {
			display: flex;
			flex-direction: row;
			align-items: center;
			> img {
				width: 32px;
				height: 32px;
			}
			> a {
				font-size: 26px;
				color: #222;
				margin-left: 20px;
				letter-spacing: 4px;
				font-weight: 600;
			}
		}
	}
	.web-container {
		width: 100%;
		height: calc(100% - 108px);
		overflow: auto;
		.web-footer {
			width: 100%;
			height: 120px;
			background-color: #80A681;
			.copyright {
				width: 100%;
				text-align: center;
				padding: 20px 0;
				color: #eeffe3;
				font-size: 14px;
			}
			.friend-wrap {
				width: 1280px;
				margin: 0 auto;
				display: flex;
				flex-direction: row;
				.left {
					color: #eeffe3;
					line-height: 28px;
					margin-right: 12px;
					font-size: 14px;
					font-weight: 300;
					white-space: nowrap;
				}
				.link-box {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					.link {
						color: #eeffe3;
						line-height: 28px;
						margin: 0 24px 12px 0;
						font-size: 14px;
						font-weight: 300;
						transition: all .2s;
						&:hover {
							color: #fff;
						}
					}
				}
			}
		}
	}
}
</style>